$(function () {
    load();
    //1.判断是否按下回车
    $("#title").on("keydown", function (e) {
        if (e.keyCode === 13) {
            if ($(this).val() === "") {
                alert("请输入内容")
            } else {
                var local = getDate()
                // console.log(local);           
                local.push({
                    title: $(this).val(),
                    done: false
                });
                saveDate(local);
                load();
                $(this).val("")
            }
        }
    })
    //3.todolist 删除操作
    $("ol,ul").on("click", "a", function () {
        var data = getDate();
        var index = $(this).attr("id");
        data.splice(index, 1);
        //重新存储
        saveDate(data);
        //重新渲染
        load();
    })
    //4.todolist现在进行和已完成操作
    $("ul,ol").on("click", "input", function () {
        //获取数据
        var data = getDate()
        //修改数据
        var index = $(this).siblings("a").attr("id")
        console.log(index);
        data[index].done = $(this).prop("checked")
        //保存到本地存储
        saveDate(data)
        //重新渲染页面
        load()
    })

    //2.读取本地存储的数据
    function getDate() {
        var date = localStorage.getItem("todolist")
        if (date !== null) {
            return JSON.parse(date)
        } else {
            return []
        }
    }
    //保存本地数据
    function saveDate(date) {
        localStorage.setItem("todolist", JSON.stringify(date))
    }
    //渲染加载数据
    function load() {
        var date = getDate()
        console.log(date);
        //每次读取前先清空ol
        $("ul,ol").html("")
        //遍历数据
        var todoCount = 0 //右侧计数
        var doneCount = 0
        $(date).each(function (i, e) {
            if (e.done) {
                $("ul").prepend(`<li><input type="checkbox" checked="checked">
                <p>${e.title}</p><a href="javascript:;" id="${i}"></a>
            </li>`)
                doneCount++;
            } else {
                $("ol").prepend(`<li><input type="checkbox">
           <p>${e.title}</p><a href="javascript:;" id="${i}"></a></li>`)
                todoCount++;
            }
            $("#todocount").text(todoCount)
            $("#donecount").text(doneCount)

        })
    }

})